{% load static %}
<div class="nav-category-container category-icons">
    <ul class="nav-category-list">
        {% for category in categories %}
        <li class="nav-category-item">
            <a href="{% url 'category' category.id %}" class="nav-category-link">
                {% if forloop.counter == 1 %}
                <i class="bi bi-laptop"></i>
                {% elif forloop.counter == 2 %}
                <i class="bi bi-phone"></i>
                {% elif forloop.counter == 3 %}
                <i class="bi bi-tv"></i>
                {% elif forloop.counter == 4 %}
                <i class="bi bi-headphones"></i>
                {% elif forloop.counter == 5 %}
                <i class="bi bi-camera"></i>
                {% elif forloop.counter == 6 %}
                <i class="bi bi-house"></i>
                {% elif forloop.counter == 7 %}
                <i class="bi bi-cart"></i>
                {% else %}
                <i class="bi bi-gift"></i>
                {% endif %}
                {{ category.name }}
            </a>
            <div class="nav-subcategory-container">
                {% for subcategory in category.subcategories.all %}
                <div class="nav-subcategory-section">
                    <h4 class="nav-subcategory-heading">
                        <a href="{% url 'subcategory' subcategory.id %}">{{ subcategory.name }}</a>
                    </h4>
                    <div class="nav-product-type-container">
                        {% for product_type in subcategory.product_types.all %}
                        <a href="{% url 'product_type' product_type.id %}" class="nav-product-type-link">{{ product_type.name }}</a>
                        {% if not forloop.last %} | {% endif %}
                        {% endfor %}
                    </div>
                </div>
                {% endfor %}
            </div>
        </li>
        {% endfor %}
    </ul>
</div> 